<template>
  <div class="question-category-container">
    <!-- 筛选条件区域 -->
    <!-- <div class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-label">题目分类名称：</span>
          <el-input placeholder="请输入" v-model="filter.name" clearable style="width: 200px;"></el-input>
        </div>
        <div class="filter-item">
          <span class="filter-label">分析原因：</span>
          <el-select placeholder="请选择" v-model="filter.reason" clearable style="width: 200px;">
            <el-option label="教学需求" value="1"></el-option>
            <el-option label="考试要求" value="2"></el-option>
          </el-select>
        </div>
      </div>
    </div> -->

    <!-- 操作按钮区域 -->
    <div class="operation-bar">
      <el-button type="primary" icon="el-icon-plus" @click="handleAddCategory">新增题库分类</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="handleBatchDelete" :disabled="selection.length === 0">批量删除</el-button>
      
      <div class="operation-info" v-if="selection.length > 0">
        <span>已选择 {{ selection.length }} 项</span>
        <span style="margin-left: 20px;">本次查询耗时：{{ queryTime }}秒</span>
        <el-button type="text" @click="clearSelection" style="margin-left: 20px;">清空</el-button>
      </div>
    </div>

    <!-- 分类表格 -->
    <el-table
      :data="categoryList"
      border
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange"
      ref="categoryTable"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="name" label="题库分类名称" width="200"></el-table-column>
      <el-table-column prop="type" label="分类类型" width="120"></el-table-column>
      <el-table-column prop="sort" label="排序量" width="100"></el-table-column>
      <el-table-column prop="creator" label="创建人" width="120"></el-table-column>
      <el-table-column prop="updateTime" label="最新修改时间" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    ></el-pagination>
     <!-- 新增分类对话框 -->
     <el-dialog 
      :title="isEditMode ? '修改分类' : '新增分类'"
      :visible.sync="dialogVisible"
      width="600px"
    >
      <el-form label-width="120px" :model="currentCategory">
        <el-form-item label="分类名称：" prop="name" required>
          <el-input v-model="currentCategory.name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="分类类型：" prop="type" required>
          <el-select v-model="currentCategory.type" placeholder="请选择分类类型">
            <el-option label="一级分类" value="一级"></el-option>
            <el-option label="二级分类" value="二级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序量：">
          <el-input-number 
            v-model="currentCategory.sort" 
            :min="0" 
            controls-position="right"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveCategory">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuestionCategory',
  data() {
    return {
      dialogVisible: false,
      currentCategory: {
        id: null,
        name: '',
        type: '',
        sort: 0,
        creator: '',
        updateTime: ''
      },
      isEditMode: false,
      // filter: {
      //   name: '',
      //   reason: ''
      // },
      selection: [],
      queryTime: 0.345,
      categoryList: [
        {
          id: 1,
          name: '2022级题库',
          type: '一级',
          sort: 1,
          creator: '张老师',
          updateTime: '2024-05-26 09:39:11'
        },
        {
          id: 2,
          name: '2023级题库',
          type: '二级',
          sort: 2,
          creator: '周老师',
          updateTime: '2024-06-12 09:55:11'
        },
        {
          id: 3,
          name: '2024级题库',
          type: '二级',
          sort: 3,
          creator: '范老师',
          updateTime: '2024-09-22 15:23:11'
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 100
      }
    }
  },
  methods: {
    handleAddCategory() {
      this.isEditMode = false;
      this.currentCategory = {
        id: null,
        name: '',
        type: '',
        sort: 0,
        creator: '当前用户', // 实际应替换为登录用户信息
        updateTime: new Date().toLocaleString()
      };
      this.dialogVisible = true;
    },
    // 批量删除
    handleBatchDelete() {
      if (this.selection.length === 0) {
        this.$message.warning('请选择要删除的分类');
        return;
      }

      this.$confirm(`确定删除选中的 ${this.selection.length} 个分类吗?`, '提示', {
        type: 'warning'
      }).then(() => {
        const selectedIds = this.selection.map(item => item.id);
        this.categoryList = this.categoryList.filter(
          item => !selectedIds.includes(item.id))
        this.$message.success('批量删除成功');
        this.clearSelection();
      }).catch(() => {});
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
    clearSelection() {
      this.selection = [];
      this.$refs.categoryTable.clearSelection();
    },
      // 编辑分类
      handleEdit(row) {
      this.isEditMode = true;
      this.currentCategory = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
       // 保存分类
       handleSaveCategory() {
      if (!this.currentCategory.name || !this.currentCategory.type) {
        this.$message.warning('分类名称和类型为必填项');
        return;
      }

      if (this.isEditMode) {
        // 更新操作
        const index = this.categoryList.findIndex(
          item => item.id === this.currentCategory.id
        );
        if (index !== -1) {
          this.$set(this.categoryList, index, this.currentCategory);
        }
      } else {
        // 新增操作
        this.currentCategory.id = this.categoryList.length 
          ? Math.max(...this.categoryList.map(i => i.id)) + 1 
          : 1;
        this.categoryList.push(this.currentCategory);
      }

      this.dialogVisible = false;
      this.$message.success(this.isEditMode ? '修改成功' : '新增成功');
    },
   // 删除单条
   handleDelete(row) {
      this.$confirm(`确定删除分类 "${row.name}" 吗?`, '提示', {
        type: 'warning'
      }).then(() => {
        this.categoryList = this.categoryList.filter(item => item.id !== row.id);
        this.$message.success('删除成功');
      }).catch(() => {});
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟API请求
      console.log('获取数据:', this.filter, this.pagination);
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

<style scoped>
.question-category-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
}

/* .filter-section {
  background: #f5f7fa;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-right: 30px;
  margin-bottom: 10px;
}

.filter-label {
  width: 120px;
  text-align: right;
  margin-right: 10px;
  font-size: 14px;
} */

.operation-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.operation-info {
  margin-left: auto;
  font-size: 14px;
  color: #666;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>